<template>
  <div class="box">
    <div class="title">主账号信息查看</div>
    <el-table :data="tableData">
      <el-table-column prop="acc_id" label="账号 ID" />
      <el-table-column prop="trd_env" label="交易环境" />
      <el-table-column prop="acc_type" label="账号类型" />
      <el-table-column prop="uni_card_num" label="唯一卡号" />
      <el-table-column prop="card_num" label="卡号" />
      <el-table-column prop="security_firm" label="证券公司" />
      <el-table-column prop="sim_acc_type" label="模拟账号类型" />
      <el-table-column
        prop="trdmarket_auth"
        label="交易市场授权"
      >
        <template #default="{ row }">
          {{ row.trdmarket_auth.join(', ') }}
        </template>
      </el-table-column>
      <el-table-column prop="acc_status" label="账号状态" />
    </el-table>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import HeadLable from '@/components/HeadLable/index.vue'
import InputAutoComplete from '@/components/InputAutoComplete/index.vue'
import Empty from '@/components/Empty/index.vue'
import { getFutuAccountList } from './api'

@Component({
  name: 'FutuAccountManage',
  components: {
    HeadLable,
    InputAutoComplete,
    Empty
  }
})
export default class FutuAccountManage extends Vue {
  private tableData = []

  created() {
    this.init()
  }

  private async init() {
    await this.getFutuAccountList()
  }

  private async getFutuAccountList() {
    await getFutuAccountList()
      .then(res => {
        console.log(res)
        if (String(res.data.code) === '0') {
          this.tableData = res.data && res.data.data
        }
      })
  }
}
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;

  .title {
    font-size: 30px;
    font-weight: 600;
    padding: 10px;
  }
}
</style>
